<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM操作-练习</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style type="text/css">
        body {
            font-size: 13px;
            line-height: 25px;
        }

        table {
            border-top: 1px solid #333;
            border-left: 1px solid #333;
            width: 300px;
        }

        td {
            border-right: 1px solid #333;
            border-bottom: 1px solid #333;
        }

        .center {
            text-align: center;
        }
    </style>
</head>

<body>
    <table border="0" cellspacing="0" cellpadding="0" id="myTable">
        <tr id="row1">
            <td>书名</td>
            <td>价格</td>
        </tr>
        <tr id="row2">
            <td>看得见风景的房间</td>
            <td class="center">&yen;30.00</td>
        </tr>
        <tr id="row3">
            <td>60个瞬间</td>
            <td class="center">&yen;32. 00</td>
        </tr>
    </table>
    <input name="b1" type="button" value="增加一行" onclick="addRow()" />
    <input name="b2" type="button" value="删除第2行" onclick="delRow()" />
    <input name="b3" type="button" value="修改标题样式" onclick="updateRow()" />
    <input name="b4" type="button" value="复制最后一行" onclick="copyRow()" />
    <br><!-- 换行 -->
    <input name="b1" type="button" value="增加一行" onclick="addRow1()" />
    <input name="b2" type="button" value="删除第2行" onclick="delRow1()" />
    <input name="b3" type="button" value="修改标题样式" onclick="updateRow1()" />
    <input name="b4" type="button" value="复制最后一行" onclick="copyRow1()" />


    <script>
        function addRow() {
            const table = document.querySelector('table tbody');
            let tr = document.createElement("tr"); // tr
            let td1 = document.createElement("td"); // td  
            let td2 = document.createElement("td");
            td1.innerHTML = "幸福从天而降"; // innerHTML of td
            td2.innerHTML = "&yen;18.50";
            td2.setAttribute("align", "center"); // display center
            tr.appendChild(td1); // insert node
            tr.appendChild(td2);
            table.appendChild(tr);
        }                              //219970142 张予菲

        function addRow1() {
            // creat tr
            const newRow = $(`<tr>
                <td>幸福从天而降</td>
                <td align="center">&yen;18.50</td>
                </tr>`);
            $("table tbody").append(newRow);  // insert tr
        }

        function updateRow() {
            const head = document.querySelector('#row1'); // get head
            head.setAttribute("style", "font-weight:bold;text-align:center;background-color: #cccccc;"); // change style
        }

        function updateRow1() {
            $("#row1").attr("style", "font-weight:bold;text-align:center;background-color: #cccccc;");
        }

        function delRow() {
            const trs = document.querySelectorAll('tr'); // get all tr
            if (trs[2] != null) { // if exist trs[2], delete it
                trs[2].parentNode.removeChild(trs[2]);
            }
        }

        function delRow1() {
            if ($("tr")[2] != null) $($("tr")[2]).remove();
        }

        function copyRow() {
            let lastTr = document.querySelector('table tr:last-child');  // get last-child
            let newRow = lastTr.cloneNode(true);  // clone lastTr
            document.querySelector('table tbody').appendChild(newRow); // insert newRow
        }

        function copyRow1() {
            $("table tbody").append($("table tr:last-child").clone());
        }
    </script>
</body>

</html>